
<template>
  <div class="bf-commont-template">
    <!-- 材料附件 -->
    <div style="margin-top: 10px">
      <el-row>
        <el-col :span="4">
          <div style="padding-top: 11px; padding-left: 12px">
            <i class="far fa-hand-point-right"></i><span>重要档案存档率</span>
            <el-tooltip class="item" effect="dark" content="缺少以下重要材料" placement="right">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="13">
          <div style="padding-top: 4px">
            <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="exception"></el-progress>
          </div>
        </el-col>
        <el-col :span="6" :offset="1">
          <el-dropdown >
            <el-button type="primary" size="mini">
              打包下载<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item >下载全部</el-dropdown-item>
              <el-dropdown-item>下载基本资料</el-dropdown-item>
              <el-dropdown-item>下载档案资料</el-dropdown-item>
              <el-dropdown-item>下载离职资料</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
        <div  class="clearfix">
          <span class="bar-l"></span><span>员工基本资料</span>
          <div class="file-box clearfix">
            <div v-for="item in employeeBase" :key="item.id">
              <div class="border">
                <div class="icon-img" @click="editFile(item)">
                  <img src="../../../../../../assets/beneform4j/filetype/roster_icon_idcard.png" alt="">
                </div>
                <div class="title" @click="editFileType('employeeBase', '员工基本资料', item)"><span>{{item.type2Name}}</span></div>
                <div class="num"><span>{{item.attachmentNum}}</span></div>
                <div class="action clearfix">
                  <div class="edit float-l color" @click="editFile(item)">上传</div>
                  <div class="add float-r " @click="delete2(item)">删除</div>
                </div>
              </div>
            </div>

            <div @click="addFileType('employeeBase', '员工基本资料')">
              <div class="border" >
                <div class="icon-img">
                  <img src="../../../../../../assets/beneform4j/filetype/roster_icon_add.png" alt="">
                </div>
                <div class="title"><span>新增附件类型</span></div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <span class="bar-l"></span><span>员工档案资料</span>
          <div class="file-box clearfix">
            <!-- <div v-for="item in employeeArchives" :key="item.id"> -->
            <div v-for="item in employeeArchives" :key="item.id">
              <div class="border">
                <div class="icon-img">
                  <img src="../../../../../../assets/beneform4j/filetype/roster_icon_idcard.png" alt="">
                </div>
                <div class="title" @click="editFileType('employeeArchives', '员工档案资料', item)"><span>{{item.type2Name}}</span></div>
                <div class="num"><span>{{item.attachmentNum}}</span></div>
                <div class="action clearfix">
                  <div class="edit float-l color" @click="editFile(item)">上传</div>
                  <div class="add float-r " @click="delete3(item)">删除</div>
                </div>
              </div>
            </div>
            <div @click="addFileType('employeeArchives', '员工档案资料')">
              <div class="border" >
                <div class="icon-img">
                  <img src="../../../../../../assets/beneform4j/filetype/roster_icon_add.png" alt="">
                </div>
                <div class="title"><span>新增附件类型</span></div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <span class="bar-l"></span><span>员工离职资料</span>
          <div class="file-box clearfix">
            <!-- <div v-for="item in employeeLeave" :key="item.id"> -->
            <div v-for="item in employeeLeave" :key="item.id">
              <div class="border">
                <div class="icon-img">
                  <img src="../../../../../../assets/beneform4j/filetype/roster_icon_idcard.png" alt="">
                </div>
                <div class="title" @click="editFileType('employeeLeave', '员工离职资料', item)"><span>{{item.type2Name}}</span></div>
                <div class="num"><span>{{item.attachmentNum}}</span></div>
                <div class="action clearfix">
                  <div class="edit float-l color" @click="editFile(item)">上传</div>
                  <div class="add float-r " @click="delete1(item)">删除</div>
                </div>
              </div>
            </div>
            <div @click="addFileType('employeeLeave', '员工离职资料')">
              <div class="border" >
                <div class="icon-img">
                  <img src="../../../../../../assets/beneform4j/filetype/roster_icon_add.png" alt="">
                </div>
                <div class="title"><span>新增附件类型</span></div>
              </div>
            </div>
          </div>
        </div>
    </div>
    <div>
      <bf-table-edit
        :title="'新增附件类型'"
        :editForm ='setting1'
        ref='refAaddFile1'
        :editRules='editRules'
        @formSubmit='formSubmit1'
      ></bf-table-edit>
    </div>
    <div>
      <bf-table-edit
        :title="'修改附件类型'"
        :editForm ='setting1'
        ref='refAaddFile2'
        :editRules='editRules'
        @formSubmit='editformSubmit'
      ></bf-table-edit>
    </div>

    <div>
      <bf-table-edit
        :title="'附件信息'"
        :editForm ='settingInfo'
        ref='refAaddFileInfo'
        :editRules='editRules'
        @formSubmit='formSubmitInfo'
      ></bf-table-edit>
    </div>

    <div>
      <bf-table-edit
        :title="'编辑附件信息'"
        :editForm ='settingInfo'
        ref='refAaddFileInfo2'
        :editRules='editRules'
        @formSubmit='formSubmitInfo2'
      ></bf-table-edit>
    </div>
  </div>
</template>

<script>
import { getAttachmentApi, addAttachmentApi, uploadAttachmentApi, updateAttachmentApi, getAttachmentDocApi, deleteAttachmentDocApi } from '../api'
export default {
  props: ['employeeData'],
  data() {
    return {
      type1: '',
      type1Name: '',
      employeeBase: [],
      employeeArchives: [],
      employeeLeave: [],
      editRules: {
        type2Name: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]
      },
      settingInfo: [
        {
          field: 'type2Name',
          title: '分类名称',
          type: 'text',
          disableEdit: true
        },
        {
          field: 'docList',
          title: '附件',
          type: 'file'
        }
      ],
      setting1: [
        {
          field: 'type2Name',
          title: '分类名称',
          type: 'text'
        },
        {
          field: 'des',
          title: '描述',
          type: 'text'
        }
      ]
    }
  },
  mounted: function() {
    this.getAttachment()
  },
  methods: {
    delete1(item) {
      this.$confirm('删除该附件分类以及分类下所有附件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAttachmentDocApi(item).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getAttachment()
          }
        })
      })
    },
    delete2(item) {
      this.$confirm('删除该附件分类以及分类下所有附件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAttachmentDocApi(item).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getAttachment()
          }
        })
      })
    },
    delete3(item) {
      this.$confirm('删除该附件分类以及分类下所有附件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAttachmentDocApi(item).then(response => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getAttachment()
          }
        })
      })
    },
    handleClick(item) {
      console.log(item)
    },
    editFile(item) {
      // console.log(item)
      const data = {
        busiKey: this.employeeData.employeeNo,
        type1: item.type1,
        type2: item.type2
      }
      getAttachmentDocApi(data).then(response => {
        if (response.success) {
          item.docList = response.data
          this.$refs.refAaddFileInfo2.show(item)
        }
      })
    },
    formSubmitInfo2(form) {
      this.formSubmitInfo(form)
    },
    updateAttachment(data) {
      updateAttachmentApi(data).then(resposen => {
        if (resposen.success) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.$refs.refAaddFile2.hidden()
          this.getAttachment()
        }
      })
    },
    editFileType(type, type1Name, item) {
      this.type1 = type
      this.type1Name = type1Name
      this.$refs.refAaddFile2.show(item)
    },
    editformSubmit(form) {
      this.updateAttachment(form)
    },
    uploadFile(item) {
      // console.log(item)
      this.$refs.refAaddFileInfo.show(item)
    },
    formSubmitInfo(form) {
      const data = {
        busiKey: this.employeeData.employeeNo,
        type1: form.type1,
        type2: form.type2,
        docList: form.docList
      }
      uploadAttachmentApi(data).then(resposen => {
        if (resposen.success) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.$refs.refAaddFileInfo2.hidden()
          this.$refs.refAaddFileInfo.hidden()
          this.getAttachment()
        }
      })
    },
    addFileType(type, type1Name) {
      this.type1 = type
      this.type1Name = type1Name
      this.$refs.refAaddFile1.show({})
    },
    getAttachment() {
      let empNo = this.employeeData.employeeNo
      let params = {
        employeeNo: empNo
      }
      getAttachmentApi(params).then(response => {
        this.employeeBase = []
        this.employeeArchives = []
        this.employeeLeave = []
        if (response.success && response.data) {
          response.data.forEach(item => {
            if (item.type1 === 'employeeBase') {
              this.employeeBase.push(item)
            }
            if (item.type1 === 'employeeArchives') {
              this.employeeArchives.push(item)
            }
            if (item.type1 === 'employeeLeave') {
              this.employeeLeave.push(item)
            }
          })
        }
        // console.log(this)
      })
    },
    formSubmit1(form) {
      const params = {
        type1Name: this.type1Name,
        type2Name: form.type2Name,
        des: form.des,
        type1: this.type1,
        employeeNo: this.employeeData.employeeNo
      }
      addAttachmentApi(params).then(response => {
        if (response.success) {
          this.$message({
            type: 'success',
            message: '添加成功'
          })
          this.$refs.refAaddFile1.hidden()
          this.getAttachment()
        }
      })
    }
  }
}
</script>
<style scoped>
.file-box>div{
  float: left;
  width: 20%;
}
.file-box{
  margin-top: 20px;
  margin-bottom: 20px;
}
.file-box>div>div{
  margin-left: 8px;
  margin-right: 8px;
  height: 250px;
  margin-bottom: 16px;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}
.file-box>div>div:hover{
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
  border: 1px solid transparent;
}
.icon-img{
  padding-top: 30px;
  padding-bottom: 30px;
}
.title{
  margin-bottom: 20px;
}
.action{
  margin: 0 40px;
}
.num{
  margin-bottom: 10px;
}
</style>
